<template>
  <div id="video-list">
    <div id="carousel">
      <el-carousel :interval="5000" arrow="always" height="285px">
        <el-carousel-item v-for="video in videos">
          <div class="carousel-img" @click="player(video.vid)">
            <img :src="video.img">
            <div class="carousel-tittle">
              <el-link type="primary">{{ video.tittle.substring(0, 23) + '...' }}</el-link>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoList",
  methods: {
    player: function (index) {
      this.c_vid = index
    }
  },
  data() {
    return {
      iframe: "https://player.bilibili.com/player.html?high_quality=1&aid=",
      videos: [
        {
          vid: "768587408",
          tittle: "《碧蓝航线》「虹彩的终幕曲」概念PV",
          img: "http://i2.hdslb.com/bfs/archive/403c6479b6005ddb3b0e08dc6300dad2bcbcd3ff.jpg",
          view: "1240",
        },
        {
          vid: "853558250",
          tittle: "我二舅介绍的，兄弟们别说了我是正经人！",
          img: "http://i1.hdslb.com/bfs/archive/6f1073acad77393c597f9c3c21b35aa72e692ac4.jpg",
          view: "150",
        },
        {
          vid: "468615640",
          tittle: "有些人表面是笨蛋 实际上是…..",
          img: "http://i1.hdslb.com/bfs/archive/f0e2615d379dcfe408707a945b414e372ddae985.jpg",
          view: "500",
        },
        {
          vid: "213612428",
          tittle: "B站的朋友们，还记得小时候在农村房前田野上看过的萤火虫吗？",
          img: "http://i0.hdslb.com/bfs/archive/aaf4ea43a5635c14169cb234743777bf2ac672b5.jpg",
          view: "1240",
        },
        {
          vid: "641119383",
          tittle: "《5000 块 钱 都 不 给 我》",
          img: "http://i2.hdslb.com/bfs/archive/6dcc7c9f33e900d62bd9d6a825753100cb5b1fbd.jpg"
        },
        {
          vid: "638439802",
          tittle: "实名举报！女子称被县财政局某领导搂腰摸胸，逼迫自己签订谅解书",
          img: "http://i1.hdslb.com/bfs/archive/a5653661e5de4a3f0d4b13ef09ca36a97812e591.jpg"
        },
        {
          vid: "553555113",
          tittle: "世界各国的猛男都怎么跳舞？",
          img: "http://i0.hdslb.com/bfs/archive/b65affa2bdf0ace67aeb4b1375ff7ed80b2d319d.jpg"
        },
        {
          vid: "383446904",
          tittle: "每 日 一 遍 ，童 年 再 见 ！",
          img: "http://i1.hdslb.com/bfs/archive/ae0d48e38bef93d8756ca84262a2b325813ee142.jpg"
        },
      ],
      c_vid: "",
    }
  },
  mounted() {
    this.c_vid = this.videos[0].vid
  }

}
</script>

<style scoped>
#video-list {
  width: 100%;
  height: 100%;
  text-align: center;
}

#carousel {
  width: 20%;
  margin: 1px auto;
}

#carousel img {
  width: 100%;
  height: 100%;
}
</style>